<template>
	<view class="ordersucess">
		<nav-bar isBack  :title="title" ></nav-bar>
		<!-- 顶部 -->
		<view v-if="type==1">
			<view class="imx"><image src="https://manager.ryz1620.com/static/my/suess.png"></image></view>
			<view class="order-tit">
				下单成功！
				<text>订单号：{{orderid}}</text>
			</view>
		</view>
		<view v-if="type==0">
			<view class="imx"><image src="https://manager.ryz1620.com/static/my/ons.png"></image></view>
			<view class="order-tit">
				支付失败！
				<text>订单号：{{orderid}}</text>
			</view>
		</view>
		
		<view class="order-btn">
			<text class="ktex" @click="getorder">查看订单</text>
			<text @click="index">返回首页</text>
		</view>
		<!-- 订单礼包弹窗 -->
		<view class="giftPop" :style="giftShowModal?'':'display:none;'" v-if="type==1">
			<view class="bannercont">
				<image :src="baseimg+'/static/activity/activity_gift_bag.png'" class="giftBagImg"></image>
				<view class="in-frame">
					<view class="frame-box">
						<view class="column-title">
							<!-- 单笔消费满1000，前100名 -->
							<text style="margin-top: -28rpx;">恭喜您获得</text>
						</view>
						<scroll-view  scroll-y="true" class="scroll-y">
						<view v-for="(item,index) in gifList" :key="index">
						<view class="row-item" >
							<view class="draw_prize" v-if="item.type=='DRAW_PRIZE'"><!-- 抽奖类型 -->
								<image :src="baseimg+'/static/activity/luck_draw_volume.png'"></image>
							</view>
							<view class="sidebar_a" v-else>
								<image :src="item.img"></image>
							</view>
							<view class="sidebar_b">
								<text v-if="item.value>1 && item.type!='DRAW_PRIZE'">数量x{{item.value}}</text>
								<text v-if="item.type=='DRAW_PRIZE'">获得抽奖次数{{item.value}}</text>
								<text v-else>{{item.name}}</text>
								<text v-if="item.type!='DRAW_PRIZE'" class="time">有效期：{{$common.timestampDate(item.end_at)}}</text>
							</view>
						</view>
						</view>
						</scroll-view>
						<view class="libaoBtn"  @click="giftShowClose('已领取')">
							开心收下
						</view>
					</view>
				</view>
				<view class="iconfont icon-close" @click="giftShowClose(0)"></view>
			</view>
		</view>
	</view>
</template>

<script>
import navBar from "@/components/navBar/navBar.vue"
import activity from '@/service/activity.js'
export default {
	components: { navBar },
	
	data() {
		return {
           orderid:'',
		   type:'',
		   title:'',
		   giftShowModal: false, //订单礼包弹窗
		   gifList:[],
		   baseimg:'https://manager.ryz1620.com',
		   prize_type:'',//奖品类型
		}
	},
	onLoad(e) {
		this.$utils.getUrl()
		this.orderid = e.order_no
		this.type = e.type
		if(this.type==1){
			this.title = '下单成功';
			this.getOrderReward();
		}else{
			this.title = '下单失败';
		}
	},
	methods: {
		index(){
			uni.switchTab({
				url:'/pages/home/index/index'
			})
		},
		getorder(){
			uni.navigateTo({
				url:'/pages_mall/pages/mall/order/list'
			})
		},
		goSkip(url){
			uni.navigateTo({
				url:url
			})
		},
		giftShowClose(e) {
			if(e!=0){
				this.$common.errorToShow(e);
				setTimeout(function(){
					uni.navigateTo({
						url:'/pages_activity/pages/giftBag/giftBag/index'
					})
				},2000);
			}
			this.giftShowModal = false;
		},
		//订单满金额弹窗
		getOrderReward(){
			activity.orderReward({
				type:2,	
				order_id:this.orderid
				})
				.then(res => {
					if (res.code == 1 && res.data.length>0) {
						let data =res.data;
						this.gifList=data;
						for(var i=0;i<data.length;i++){
							if(data[i].type=='DRAW_PRIZE'){
							   this.prize_type='DRAW_PRIZE';	
							   break;
							}
						}
						this.giftShowModal=true;
					} else {
						
					}
				})
		},
	}
}
</script>

<style lang="scss" scoped>
.ordersucess{
	width: 100%;height: 100vh;background: #fff;display: flex;flex-flow: column;
}
.imx{
	width: 288rpx;
	height: 232rpx;
	margin: 70rpx auto;
}
.order-tit{
	text-align: center;
	font-size: 34rpx;
	padding: 0 30rpx;
	word-wrap: break-word;
	text{
		font-size: 28rpx;
		color: #888;
		display: block;
		margin: 20rpx 0;
	}
}
.order-btn{
	margin-top: 50rpx;
	text-align: center;
	text{
		display: inline-block;
		padding: 15rpx 50rpx;
		background: #C3AB7C;
		color: #fff;
		margin: 0 30rpx;
		border-radius: 5rpx;
	}
	.ktex{
		background:none;
		border:1px #C3AB7C solid;
		color: #C3AB7C;
	}
}
.giftPop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.2);
		z-index: 9999;

		.bannercont {
			width: 80%;
			height: 868rpx;
			position: absolute;
			left: 10%;
			top: 20%;
			background: linear-gradient(156deg, #F1D9A4, #E3B26B);
			border-radius: 20px;

			.giftBagImg {
				position: absolute;
				left: 50%;
				top: -8%;
				transform: translate(-50%, -50%);
				width: 520rpx;
				height: 264rpx;
			}

			.in-frame {
				display: flex;
				align-items: center;
				width: 100%;
				height: 100%;

				.frame-box {
					width: 93.44%;
					height: 95.59%;
					margin: auto;
					padding: 20rpx;
					background: #FEF4DE;
					box-shadow: 0px 2px 14px 0px rgba(237, 207, 150, 0.8);
					border-radius: 20rpx;

					.column-title {
						margin-top: 55rpx;
						color: #5C3D06;
						text-align: center;
						font-weight: 500;

						text {
							font-size: 38rpx;
							display: block;
							font-weight: bold;
							line-height: 80rpx;
						}
					}

					.row-item {
						width: 490rpx;
						height: 148rpx;
						margin: auto;
						margin-bottom: 20rpx;
						background: #FFFBF6;
						box-shadow: 0px 2px 6px 0px #F5EEE0;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						// justify-content: space-around;

						.sidebar_a {
							width: 36%;
							font-size: 42rpx;
							text {
								font-weight: bold;
								color: #E94B1A;
							}
							image{
								width: 124rpx;
								height: 124rpx;
								border-radius:50%;
								margin: auto;
							}
						}
						.draw_prize{
							width: 36%;
							font-size: 42rpx;
							text {
								font-weight: bold;
								color: #E94B1A;
							}
							image{
								width: 114rpx;
								height: 94rpx;
								margin: auto;
							}
						}

						.sidebar_b {
							font-size: 28rpx;
							color: #B97839;
							font-weight: bold;
							line-height: 40rpx;
                            margin-left:20rpx;
							text-overflow:ellipsis;
							overflow:hidden;
							white-space:nowrap;
							text {
								display: block;
								text-overflow:ellipsis;
								overflow:hidden;
								white-space:nowrap;
							}
							text.time {
								font-size: 24rpx;
								color: #9B8E77;
							}
						}

					}

					.libaoBtn {
						position:absolute;
						bottom: 20rpx;
						left: 50%;
						transform: translate(-50%,0);
						width: 440rpx;
						height: 80rpx;
						margin: 40rpx auto;
						background: linear-gradient(180deg, #F6DDA5, #EBBC79);
						border-radius: 40rpx;
						text-align: center;
						color: #5C3D06;
						font-weight: bold;
						line-height: 80rpx;
					}
				}
			}

			.icon-close {
				display: block;
				font-size: 60rpx;
				color: #fff;
				text-align: center;
				margin: 48rpx auto;
			}
		}
		.scroll-y{
			width:auto;
			max-height:524rpx;
		}
	}
</style>